<template>
	<div class="page">
		
		<head-back></head-back>
		
		<div class="content">
			<form action="" id="">
				<div class="list-block list-margin content-martop10 content-boxshow ">
					<ul>
						<li>
							<div class="item-content content-padrights">
								<div class="item-inner border-bottom">
									<div class="item-title label color-333 font-14">账户</div>
									<div class="item-input">
										<input type="text" id="name" v-model="username" placeholder="您的用户名或手机号码是？">
									</div>
								</div>
							</div>
						</li>

						<li>
							<div class="item-content content-padrights" >
								<div class="item-inner ">
									<div class="item-title label color-333 font-14">密码</div>
									<div class="item-input">
										<input type="password" id="password" placeholder="您的密码？">
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="padding21">
					<a id="login" class="button button-big button-warning margin20">登录</a>
					<!--<a href="/#/user.register2" class="button button-big button-light backfff">立即注册</a>-->
				</div>
			</form>
			<div class="getpwd text-right padding575">
				<!--<a href="/#/user.findpwd" class="color-333 min-font">忘记密码？</a>-->
			</div>
		</div>
		
	</div>
		
	<panel></panel>
		
</template>

<script>
	import headBack from "../components/headBack.vue"
	import panel from "../components/panel.vue"
	import store from "../vuex/store.js"
	import getters from "../vuex/getters.js"
	import actions from "../vuex/actions.js"

	export default {
		name: "login",
		data(){
			return {
				username: ''
			}
		},
		methods: {
			login(){
				var self = this;
				
				var tel_exp = /^1[3|4|5|7|8]\d{9}$/;
				var name_exp = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
				var num_exp = /^\d+$/;
				
				function checkUser(){
					var content = $('#name').val();
					if(tel_exp.test(content)){
						return true;
					}else if(content==''){
						return $.toast('请填写用户名');
					}else if(!name_exp.test(content)){
						return $.toast('用户名由汉字、字母或数字组成');
					}else if(num_exp.test(content)){
						return $.toast('用户名不能全为数字');
					}else{
						return true;
					}
				}
				
				function testPassword() {
					var content = $('#password').val();
					if (content == "") {
						return $.toast("请输入密码");
					} else if (num_exp.test(content)) {
						return $.toast("密码不能全是数字");
					} else {
						return true;
					}
				}
				
				$('#name').blur(checkUser);
				
				$('#password').blur(testPassword);

				$('#login').click(function(){
					if(checkUser()&&testPassword()){
						var name = $('#name').val();
						var password = $('#password').val();
						var param = {"name": name, "password": password};
						self.ajax('./api/user','login',param,function(data){
							localStorage.setItem("token",data.token);
							$.toast('登录成功');
							history.back();
						});
					}
				});
			}
		},
		components: {
			headBack,
			panel
		},
		store: store,
		vuex: {
			getters: {
				isLogin: getters.loginStatus
			},
			actions: {
				tokenState: actions.tokenState
			}
		},
		route: {
			data(){
				this.tokenState()
			}
		},
		ready(){
			this.login() 
		}
	}
</script>